<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://unpkg.com/codemirror@5.40.0/lib/codemirror.css" />
    <link rel="stylesheet" href="https://unpkg.com/codemirror@5.40.0/theme/material.css" />
    <link rel="stylesheet" href="https://unpkg.com/codemirror@5.40.0/addon/lint/lint.css" />
    <title>problem</title>
    <link rel="stylesheet" href="http://unpkg.com/layui@2.6.8/dist/css/layui.css">
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <style>
        textarea {
            outline: 0 none;
            border-color: rgba(82, 168, 236, 0.8);
            box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
            padding: 0px;
        }
    </style>
</head>

<script src="http://unpkg.com/layui@2.6.8/dist/layui.js"></script>

<body>
    <div class="layui-row">
        <div class="layui-col-xs12 layui-col-sm12 layui-col-md6" style="overflow: auto;height: 100vh;">
            <h2>{{ .problem.ProblemId }}:{{ .problem.Title }}</h2>
            <div class="layui-bg-gray">
                <div class="layui-card">
                    <div class="layui-card-header">描述</div>
                    <div class="layui-card-body">
                        <pre style="border:none;">{{ .problem.Description }}</pre>
                    </div>
                </div>
            </div>
            <div class="layui-bg-gray">
                <div class="layui-card">
                    <div class="layui-card-header">输入描述</div>
                    <div class="layui-card-body">
                        <pre style="border:none;">{{ .problem.DescInput }}</pre>
                    </div>
                </div>
            </div>
            <div class="layui-bg-gray">
                <div class="layui-card">
                    <div class="layui-card-header">输出描述</div>
                    <div class="layui-card-body">
                        <pre style="border:none;">{{ .problem.DescOutput }}</pre>
                    </div>
                </div>
            </div>
            {{ range $i, $v := .stdins }}
            <div class="layui-bg-gray" style="padding: 10px;">
                <div class="layui-row layui-col-space15">
                    <div class="layui-col-md6">
                        <div class="layui-card">
                            <div class="layui-card-header">输入样例</div>
                            <div class="layui-card-body">
                                <pre style="border:none;">{{ index $.stdins $i }}</pre>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md6">
                        <div class="layui-card">
                            <div class="layui-card-header">输出样例</div>
                            <div class="layui-card-body">
                                <pre style="border:none;">{{ index $.stdouts $i }}</pre>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {{ end }}
            <div class="layui-bg-gray" style="padding: 10px;">
                <div class="layui-row layui-col-space15">
                    <div class="layui-col-md3">
                        <div class="layui-card">
                            <div class="layui-card-header">时间限制(MS)</div>
                            <div class="layui-card-body">
                                <pre style="border:none;">{{ .problem.TimeLimit }}</pre>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md3">
                        <div class="layui-card">
                            <div class="layui-card-header">内存限制(KB)</div>
                            <div class="layui-card-body">
                                <pre style="border:none;">{{ .problem.MemoryLimit}}</pre>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md3">
                        <div class="layui-card">
                            <div class="layui-card-header">题目类型</div>
                            <div class="layui-card-body">
                                <pre style="border:none;">{{ if eq .problem.JudgeType 0 }}常规判题{{ else if eq .problem.JudgeType 1 }} 交互判题{{ else if eq .problem.JudgeType 2 }} 特判题{{ else if eq .problem.JudgeType 3 }} 数据库查询题型{{ else if eq .problem.JudgeType 4 }} 数据库增删改题型{{ else if eq .problem.JudgeType 5 }}模块题型{{ else }}UNKOWN{{ end }}</pre>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md3">
                        <div class="layui-card">
                            <div class="layui-card-header">赛制类型</div>
                            <div class="layui-card-body">
                                <pre style="border:none;">{{ if intAndint .problem.Ruler 1 }}ACM{{ else if intAndint .problem.Ruler 2 }}OI{{ else }}NONE{{ end }}</pre>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-xs12 layui-col-sm12 layui-col-md6" style="overflow: auto;height: 100vh;">
            <form action="" class="layui-form" method="post">
                <div class="layui-form-item">
                    <div class="layui-inline" style="width: 30%;">
                        <label class="layui-form-label">language:</label>
                        <div class="layui-input-inline" style="width: 60%;">
                            <select class="form-control" name="language" id="language" lay-filter="selctOnchange" lay-verify="">
                                {{ range $k,$v := .languages}}
                                <option value="{{$v}}">{{$k}}</option>
                                {{ end }}
                            </select>
                            <a href="/status">查看状态</a>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <textarea class="form-control" name="code" id="code" placeholder="input your code"></textarea>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <div class="layui-input-inline">
                            <input class="layui-btn" name="subumit" type="button" id="submit" onclick="submit_test();" value="运行测试" />
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">用户名</label>
                        <div class="layui-input-inline">
                            <input type="text" id="user" name="user" lay-verify="title" autocomplete="off" class="layui-input" value="{{ .uesrname }}">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <div class="layui-input-inline">
                            <input class="layui-btn" name="subumit_btn" type="button" id="subumit_btn" onclick="submit_code();" value="提交运行" />
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-collapse">
                        <div class="layui-colla-item">
                            <h2 class="layui-colla-title">控制台</h2>
                            <div class="layui-colla-content">
                                <div class="layui-tab" id="test_console" lay-filter="demo">
                                    <ul class="layui-tab-title">
                                        <li class="layui-this" lay-id="case1">
                                            <h4 name="case">case1</h4><button type="button" class="layui-btn layui-btn-xs layui-btn-radius layui-btn-danger" onclick="remove_example(this)"><i
                                                    class="layui-icon layui-icon-close layui-font-3"></i></button><button type="button" class="layui-btn layui-btn-xs layui-btn-radius" onclick="insert_example(this)"><i
                                                    class="layui-icon layui-icon-addition layui-font-3"></i></button>
                                        </li>
                                    </ul>
                                    <div class="layui-tab-content" id="example_content">
                                        <div class="layui-tab-item layui-show" name="example">
                                            <div class="layui-card">
                                                <div class="layui-card-header">比对结果</div>
                                                <div class="layui-card-body">
                                                    <textarea class="form-control" name="result" id="result" placeholder="compare result" style="border:none;" rows="5" readonly></textarea>
                                                </div>
                                            </div>
                                            <div class="layui-card">
                                                <div class="layui-card-header">样例输入</div>
                                                <div class="layui-card-body">
                                                    <textarea class="form-control" name="stdin" id="stdin" placeholder="input your stdin" style="border:none;"></textarea>
                                                </div>
                                            </div>
                                            <div class="layui-card">
                                                <div class="layui-card-header">标准输出</div>
                                                <div class="layui-card-body">
                                                    <textarea class="form-control" name="stdout" id="stdout" style="border:none;" readonly></textarea>
                                                </div>
                                            </div>
                                            <div class="layui-card">
                                                <div class="layui-card-header">实际输出</div>
                                                <div class="layui-card-body">
                                                    <textarea class="form-control" name="output" id="output" placeholder="return code output" style="border:none;"></textarea>
                                                </div>
                                            </div>
                                            <div class="layui-card">
                                                <div class="layui-card-header">报错信息</div>
                                                <div class="layui-card-body">
                                                    <textarea class="form-control" id="error_text" name="error_text" placeholder="error message" style="border:none;"></textarea>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>

        </div>
    </div>
</body>
<script>
    //注意：折叠面板 依赖 element 模块，否则无法进行功能性操作
    layui.use('element', function() {
        var element = layui.element;

        //…
    });
</script>
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/jshint@2.9.6/dist/jshint.js"></script>
<script src="https://unpkg.com/codemirror@5.40.0/lib/codemirror.js"></script>
<script src="https://unpkg.com/codemirror@5.40.0/addon/hint/show-hint.js"></script>
<script src="https://unpkg.com/codemirror@5.40.0/addon/lint/lint.js"></script>
<script src="https://unpkg.com/codemirror@5.40.0/mode/clike/clike.js"></script>
<script src="https://unpkg.com/codemirror@5.40.0/mode/python/python.js"></script>
<script src="https://unpkg.com/codemirror@5.40.0/mode/javascript/javascript.js"></script>
<script src="https://unpkg.com/codemirror@5.40.0/addon/lint/javascript-lint.js"></script>
<script src="https://unpkg.com/codemirror@5.40.0/addon/selection/active-line.js"></script>
<script src="https://unpkg.com/codemirror@5.40.0/addon/edit/matchbrackets.js"></script>
<link rel="stylesheet" href="https://unpkg.com/codemirror@5.40.0/theme/darcula.css">
<link rel="stylesheet" href="https://unpkg.com/codemirror@5.40.0/addon/lint/lint.css">
<link rel="stylesheet" href="https://unpkg.com/codemirror@5.40.0/addon/hint/show-hint.css">
<script>
    var myTextArea = document.getElementById('code');
    var editor = CodeMirror.fromTextArea(myTextArea, {
        lineNumbers: true, //是否在编辑器左侧显示行号
        lineWrapping: true, // 是否应滚动或换行以显示长行
        matchBrackets: true, // 括号匹配
        mode: "text/x-c++src", //C++
        indentUnit: 4, // 缩进单位为4
        indentWithTabs: true, //
        smartIndent: true, //自动缩进，设置是否根据上下文自动缩进（和上一行相同的缩进量）。默认为true。
        styleActiveLine: true, // 当前行背景高亮
        theme: 'darcula', // 编辑器主题
        showCursorWhenSelecting: true,
        pasteLinesPerSelection: false,
        spellcheck: true,
        smartIndent: true,
        matchBrackets: true,
        autofocus: true,
        extraKeys: {
            "Alt-/": "autocomplete"
        },
        hintOptions: {
            completeSingle: false
        },
    });
    editor.setSize('100%', '400px'); //设置代码框大小
    //显示提示
    this.editor.on("inputRead", (instance, changeObj) => {
        if (/^[a-zA-Z]/.test(changeObj.text[0])) {
            editor.showHint();
        }
    });
</script>
<script>
    function submit_test() {
        code = editor.getValue();
        stdins = document.getElementsByName('stdin');
        let stdin = new Array(stdins.length).fill('');
        for (let i = 0; i < stdins.length; i++) {
            stdin[i] = stdins[i].value;
        }
        // alert(typeof(val))
        if (code.length == 0) {
            alert('请输入代码')
            return;
        }
        // 禁用按钮先
        document.getElementById('submit').disabled = "disabled"
        document.getElementById('submit').value = "提交中"
        $.post("/online_test", JSON.stringify({
                "code": code,
                "language": document.getElementById('language').value,
                "stdin": stdin,
                "problem_id": "{{ .problem.ProblemId }}",
            }),
            function(result) {
                if (result.code == 0) {
                    check(result.data.id, result.data.check_url);
                } else {
                    alert("error:" + result.msg);
                    document.getElementById('submit').disabled = ""
                    document.getElementById('submit').value = "运行测试"
                }
            }, "json").fail(function(result) {
                alert('提交失败 ' + result.statusText)
                document.getElementById('submit').disabled = ""
                document.getElementById('submit').value = "运行测试"
        });

    }

    function check(codeId, checkUrl) {
        $.get(checkUrl, {
                "id": codeId
            },
            function(result) {
                // alert(JSON.stringify(result))
                if (result.code > 127) {
                    document.getElementById('submit').value = result.msg;
                    setTimeout("check('" + codeId + "','" + checkUrl + "')", 500);
                    // alert(JSON.stringify(result))
                } else {
                    let stdouts = document.getElementsByName('stdout');
                    for (let i = 0; i < stdouts.length; i++) {
                        document.getElementsByName('output')[i].value = '';
                        document.getElementsByName('result')[i].value = '';
                        document.getElementsByName('error_text')[i].value = '';
                    }
                    if (result.code != 0) {
                        document.getElementsByName('result')[0].value =
                            new Date().toLocaleTimeString() + '\n' +
                            'error:' + result.error;
                    } else {
                        result = result.data;

                        if (result.error_code != 0) {
                            document.getElementsByName('error_text')[0].value = result.error;
                        } else {
                            if (result.hasOwnProperty('extern_info') && result.extern_info != null) {
                                for (let i = 0; i < result.extern_info.result_list.length; i++) {
                                    document.getElementsByName('output')[i].value = result.extern_info.result_list[i].output || "";
                                    document.getElementsByName('error_text')[i].value = result.extern_info.result_list[i].error || "";
                                    stdouts[i].value = result.extern_info.result_list[i].stdout || "";
                                    document.getElementsByName('result')[i].value =
                                    new Date().toLocaleTimeString() + '\n' +
                                    'time:' + String(result.extern_info.result_list[i].time) + 'ms\n' +
                                    'memory:' + String(parseInt(result.extern_info.result_list[i].memory)) + 'KB' + '\n' +
                                    'result:' + String(result.extern_info.result_list[i].result) + '\n';
                                }
                            }
                        }
                    }
                    document.getElementById('submit').value = '运行测试';
                    document.getElementById('submit').disabled = "";
                }
            }, "json").fail(function(result) {
                console.log(result);
                alert('查询失败 ' + result.statusText)
                document.getElementById('submit').value = "运行测试"
                document.getElementById('submit').disabled = ""
        });
    }

    layui.use('form', function() {
        var form = layui.form;
        form.render(); //更新全部
        form.render('select'); //刷新select选择框渲染
        form.on('select(selctOnchange)', function(data) {
            // console.log(data.elem); //得到select原始DOM对象
            // console.log(data.value); //得到被选中的值
            // console.log(data.othis); //得到美化后的DOM对象
            language = document.getElementById("language").value;
            console.log(language);
            switch (language) {
                case "c", "c99":
                    editor.setOption("mode", "text/x-csrc");
                    break;
                case "python3":
                    editor.setOption("mode", "text/x-python");
                    break;
                case "c++11", "c++14", "c++17":
                    editor.setOption("mode", "text/x-c++src");
                    break;
                case "Java", "java8":
                    editor.setOption("mode", "text/x-java");
                    break;
                case "PHP", "php7":
                    editor.setOption("mode", "text/x-php");
                    break;
                default:
                    break
            }
        });
        //各种基于事件的操作，下面会有进一步介绍
    });


    function refresh_case_id() {
        var cases = document.getElementsByName("case");
        for (let i = 0; i < cases.length; i++) {
            cases[i].innerText = "case" + (i + 1).toString();
            cases[i].parentElement.setAttribute('lay-id', "case" + (i + 1).toString());
        }
    }

    function insert_example(node) {
        var n = document.getElementsByName("example").length;
        if (n >= 5) {
            alert("最多五个测试用例来测试,再多就不礼貌了");
            return;
        }
        var case_content = node.parentNode.parentNode;
        case_content.append(node.parentNode.cloneNode(true));
        var index = parseInt(node.previousElementSibling.previousElementSibling.innerText.substr(4)) - 1;
        var content = document.getElementById("example_content");
        content.append(document.getElementsByName("example")[index].cloneNode(true));
        document.getElementsByName("result")[n].value = '';
        document.getElementsByName("output")[n].value = '';
        document.getElementsByName("error_text")[n].value = '';
        refresh_case_id();
    }

    function submit_code() {
        var user = document.getElementById("user").value.trim();
        var code = editor.getValue();
        if (user == "") {
            alert("请输入用户名");
            return;
        }
        $.post(
            "/submit_code",
            JSON.stringify({
                "username": user,
                "code": code,
                "language": document.getElementById('language').value,
                "problem_id": "{{ .problem.ProblemId }}",
            }),
            function(data, status) {
                if (data.code == 0) {
                    alert("提交成功");
                    window.open("/status?search=" + user, "_blank");
                } else {
                    alert(data.msg);
                }
            }
        ).fail(function(data) {
            alert("提交失败" + JSON.stringify(data));
        });
    }

    function hasClass(element, cls) {
        return (element.className).indexOf(cls) > -1;
    }

    function remove_example(node) {
        if (document.getElementsByName("example").length <= 1) {
            alert("请至少保留一个测试");
            return;
        }
        var element = layui.element;
        var index = parseInt(node.previousElementSibling.innerText.substr(4)) - 1;
        var case_content = node.parentNode.parentNode;
        element.tabDelete('demo', "case" + (index + 1).toString());
        refresh_case_id();
    }
    // 调整高度函数
    function setHeight(element) {
        // 通过 css 属性，将元素高度设置为文本高度
        $(element).css({
            'height': 'auto',
            'overflow-y': 'hidden'
        }).height(element.scrollHeight);
    }

    // 遍历 textarea
    $('textarea').each(function() {
        // 初始化高度
        // setHeight(this);
        // 监听 input 事件，在用户输入时重设高度
    }).on('input', function() {
        setHeight(this);
    });
</script>

</html>